<template>
	<view>
		<view v-if="visible" class="wraper">
			<view>
				<button type="default" @tap="callVideo">会议模式</button>
				<button type="default" plain="false" disabled="false" @tap="cancel" hover-class="other-button-hover" class="button-cancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			visible: false
		};
	},

	components: {},
	props: {},
	methods: {
		show() {
			this.visible = true
		},

		cancel() {
			this.visible = false
		},

		callAudio() {
			this.$emit('makeAudioCall', {
				detail: 'single'
			});
			this.cancel();
		},

		callVideo() {
			this.$emit('makeVideoCall', {
				detail: 'single'
			});
			this.cancel();
		}
	}
};
</script>
<style>
.wraper {
	position: fixed;
	bottom: 0;
	height: 200rpx;
	width: 100%;
	z-index: 9;
	background: rgba(0, 0, 0, 0.1);
}
.other-button-hover {
	background-color: blue;
}
.button-cancel {
	position: absolute;
	width: 100%;
	bottom: 0;
}
</style>
